import React from "react";
import "./index.css";
import { Menu, Dropdown, Tooltip } from "antd";
import { allStore } from "../../store/AllStore";
import logo from "./HeaderLogo.png";
import logo白 from "./HeaderLogo白.png";
import 英文 from "../header/中英文 英文.png";
import 中文 from "../header/中英文 中文.png";
import 中文白 from "../header/中英文-白.png";
import 英文白 from "../header/英中文-白.png";
import { Link } from "react-router-dom";

class AllHeader extends React.Component {
  path = "";
  jump = (path) => {
    window.location.replace(`http://${window.location.host}/${path}`);
  };
  jumpOther = (path) => {
    window.open(path);
  };
  onChangeLanguage = () => {
    allStore.isEnglish = !allStore.isEnglish;
    this.props.allPageFlase();
  };
  Silde = (id) => {
    const element = document.getElementById(id);
    if (!element) {
      return;
    }
    const rect = element.getBoundingClientRect();
    if (rect.top) {
      window.scrollTo({
        top: rect.top + window.scrollY - 70,
        behavior: "smooth",
      });
    }
  };
  componentDidMount = () => {
    this.path = window.location.pathname;
    this.setState({});
  };
  getMenuItem = (rmenu) => {
    return (
      <Menu style={{borderRadius:4}}>
        {rmenu.map((item, index) => {
          return (
            <Menu.Item key={index}>
              <Link
                to={`/product?position=${item.id}`}
                onClick={this.Silde.bind(undefined, item.id)}
              >
                {item.name}
              </Link>
            </Menu.Item>
          );
        })}
      </Menu>
    );
  };
  render() {
    const interWeb="https://ylrefractory.en.alibaba.com/?spm=a2700.7756200.0.0.739371d2wcWfEy"
    const rmenu = [
      {
        name: allStore.isEnglish ? "Castable material" : "可浇注材料",
        id: "castable-material",
      },
      {
        name: allStore.isEnglish ? "Ceramic fiber blanket" : "陶瓷纤维毡",
        id: "ceramic-fiber-blanket",
      },
      {
        name: allStore.isEnglish
          ? "High alumina refractory bricks"
          : "高铝耐火砖",
        id: "high-alumina-refractory-bricks",
      },
      {
        name: allStore.isEnglish
          ? "Irregular refractory bricks"
          : "不规则耐火砖",
        id: "irregular-refractory-bricks",
      },
      {
        name: allStore.isEnglish ? "Mullite Insulating bricks" : "莫来石隔热砖",
        id: "mullite-insulating-bricks",
      },
      {
        name: allStore.isEnglish ? "Rock wool board" : "石棉板",
        id: "rock-rool-board",
      },
      {
        name: allStore.isEnglish ? "Standard refractory bricks" : "标准耐火砖",
        id: "standard-refractory-bricks",
      },
    ];
    const menu = (
      <Menu>
        <Menu.Item >
          <Tooltip overlayClassName="pcd-tool" placement="rightTop" title={() => this.getMenuItem(rmenu)}>
            <Link
              onClick={this.Silde.bind(undefined, "pd1")}
              to="/product?position=pd1"
              className="menu-item"
            >
              {allStore.isEnglish ? "Refractory material" : "耐火材料"}
            </Link>
          </Tooltip>
        </Menu.Item>
        <Menu.Item>
          <Link
            onClick={this.Silde.bind(undefined, "pd2")}
            to="/product?position=pd2"
            className="menu-item"
          >
            {allStore.isEnglish ? "Ferrous material" : "钢铁材料"}
          </Link>
        </Menu.Item>
      </Menu>
    );
    return (
      <div
        className="all-header-layout"
        style={{
          backgroundColor: this.props.color ? this.props.color : "transparent",
          boxShadow: this.props.color
            ? "0 14px 36px 0 rgba(34, 34, 34, .1)"
            : null,
        }}
      >
        <div style={{ width: 256, textAlign: "center" }}>
          <img
            src={this.props.isWhite ? logo白 : logo}
            alt="暂无数据"
            style={{ height: 36 }}
          />
        </div>
        <div></div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            width: 800,
          }}
        >
          <div>
            <Menu
              mode="horizontal"
              className="all-header-menu"
              selectedKeys={[this.path]}
              style={{
                backgroundColor: this.props.color
                  ? this.props.color
                  : "transparent",
                color: "white",
              }}
            >
              <Menu.Item key="/home">
                <div
                  onClick={() => this.jump("home")}
                  className={this.props.isWhite ? "menu-item-w" : "menu-item"}
                >
                  {allStore.isEnglish ? "Home" : "首页"}
                </div>
              </Menu.Item>
              <Menu.Item key="/product">
                <Dropdown overlay={menu}>
                  <div
                    onClick={() => this.jump("product")}
                    className={this.props.isWhite ? "menu-item-w" : "menu-item"}
                  >
                    {allStore.isEnglish ? "Products" : "产品信息"}
                  </div>
                </Dropdown>
              </Menu.Item>
              <Menu.Item>
                <div
                  onClick={() => this.jump("factory")}
                  className={this.props.isWhite ? "menu-item-w" : "menu-item"}
                >
                  {allStore.isEnglish ? "Factories" : "工厂信息"}
                </div>
              </Menu.Item>
              <Menu.Item>
                <div  onClick={() => this.jumpOther(interWeb)}
                  className={this.props.isWhite ? "menu-item-w" : "menu-item"}
                >
                  {allStore.isEnglish ? "Alibaba-International" : "阿里巴巴国际网站"}
                </div>
              </Menu.Item>
              <Menu.Item>
                <div
                onClick={() => this.jump("about")}
                  className={this.props.isWhite ? "menu-item-w" : "menu-item"}
                >
                  {allStore.isEnglish ? "About" : "关于我们"}
                </div>
              </Menu.Item>
              <Menu.Item>
                <div
                  onClick={() => this.jump("contact")}
                  className={this.props.isWhite ? "menu-item-w" : "menu-item"}
                >
                  {allStore.isEnglish ? "Contact Us" : "联系我们"}
                </div>
              </Menu.Item>
            </Menu>
          </div>
          <img
            onClick={this.onChangeLanguage}
            style={{ height: 32, cursor: "pointer", marginRight: 32 }}
            src={
              this.props.isWhite
                ? allStore.isEnglish
                  ? 英文白
                  : 中文白
                : allStore.isEnglish
                ? 英文
                : 中文
            }
            alt="无"
          />
        </div>
      </div>
    );
  }
}
export default AllHeader;
